<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <style>
            body{
                background:#F7F9FA;
                margin:0;
                padding:0;
                color:#6f6f6f;
                font-size:18px
            }

            button{
                border:0;
                width: 150px;
                height: 35px;
                background-color: orangered;
                color: white;
                font-size: 16px;
                border-radius: 6px;
            }
        .top_navigation{
            background-color: #ffffff;
            width: 100%;
            height: 56px;
            padding-left:20px;
            display:table
        }
        
        #imgbox{
            display:table-cell;
            
            vertical-align:middle
        }
        
        #txt_reload{
            margin-top:94px;
        }
        
        .main-center-m1 {
            text-align: center;
            width:300px;
            {#            height:350px;#}
            margin:auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .main-center-m2 {
            text-align: center;
            width: 300px;
            height:350px;
            margin:auto;
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }
        
        </style>
        <script type="text/javascript">
            ;(function () {
              if (window.WebViewJavascriptBridge) {
              return;
              }
              
              var messagingIframe;
              var bizMessagingIframe;
              var sendMessageQueue = [];
              var receiveMessageQueue = [];
              var messageHandlers = {};
              
              var CUSTOM_PROTOCOL_SCHEME = 'yy';
              var QUEUE_HAS_MESSAGE = '__QUEUE_MESSAGE__/';
              
              var responseCallbacks = {};
              var uniqueId = 1;
              
              // 创建消息index队列iframe
              function _createQueueReadyIframe(doc) {
              messagingIframe = doc.createElement('iframe');
              messagingIframe.style.display = 'none';
              doc.documentElement.appendChild(messagingIframe);
              }
              
              //创建消息体队列iframe
              function _createQueueReadyIframe4biz(doc) {
              bizMessagingIframe = doc.createElement('iframe');
              bizMessagingIframe.style.display = 'none';
              doc.documentElement.appendChild(bizMessagingIframe);
              }
              
              //set default messageHandler  初始化默认的消息线程
              function init(messageHandler) {
              if (WebViewJavascriptBridge._messageHandler) {
              throw new Error('WebViewJavascriptBridge.init called twice');
              }
              WebViewJavascriptBridge._messageHandler = messageHandler;
              var receivedMessages = receiveMessageQueue;
              receiveMessageQueue = null;
              for (var i = 0; i < receivedMessages.length; i++) {
              _dispatchMessageFromNative(receivedMessages[i]);
              }
              }
              
              // 发送
              function send(data, responseCallback) {
              _doSend({
                      data: data
                      }, responseCallback);
              }
              
              // 注册线程 往数组里面添加值
              function registerHandler(handlerName, handler) {
              messageHandlers[handlerName] = handler;
              }
              
              // 调用线程
              function callHandler(handlerName, data, responseCallback) {
              _doSend({
                      handlerName: handlerName,
                      data: data
                      }, responseCallback);
              }
              
              //sendMessage add message, 触发native处理 sendMessage
              function _doSend(message, responseCallback) {
              if (responseCallback) {
              var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
              responseCallbacks[callbackId] = responseCallback;
              message.callbackId = callbackId;
              }
              
              sendMessageQueue.push(message);
              messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
              }
              
              // 提供给native调用,该函数作用:获取sendMessageQueue返回给native,由于android不能直接获取返回的内容,所以使用url shouldOverrideUrlLoading 的方式返回内容
              function _fetchQueue() {
              var messageQueueString = JSON.stringify(sendMessageQueue);
              sendMessageQueue = [];
              //android can't read directly the return data, so we can reload iframe src to communicate with java
              bizMessagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
              }
              
              function _fetchQueueIOS() {
              var messageQueueString = JSON.stringify(sendMessageQueue);
              sendMessageQueue = [];
              // -- iOS 用以下来返回 --
              return messageQueueString;
              }
              
              // 提供给native使用,
              function _dispatchMessageFromNative(messageJSON) {
              setTimeout(function () {
                         var message = JSON.parse(messageJSON);
                         var responseCallback;
                         // java call finished, now need to call js callback function
                         if (message.responseId) {
                         responseCallback = responseCallbacks[message.responseId];
                         if (!responseCallback) {
                         return;
                         }
                         responseCallback(message.responseData);
                         delete responseCallbacks[message.responseId];
                         } else {
                         //直接发送
                         if (message.callbackId) {
                         var callbackResponseId = message.callbackId;
                         responseCallback = function (responseData) {
                         _doSend({
                                 responseId: callbackResponseId,
                                 responseData: responseData
                                 });
                         };
                         }
                         
                         var handler = WebViewJavascriptBridge._messageHandler;
                         if (message.handlerName) {
                         handler = messageHandlers[message.handlerName];
                         }
                         //查找指定handler
                         try {
                         handler(message.data, responseCallback);
                         } catch (exception) {
                         if (typeof console != 'undefined') {
                         console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
                         }
                         }
                         }
                         });
              }
              
              //提供给native调用,receiveMessageQueue 在会在页面加载完后赋值为null,所以
              function _handleMessageFromNative(messageJSON) {
              console.log(messageJSON);
              if (receiveMessageQueue) {
              receiveMessageQueue.push(messageJSON);
              }
              _dispatchMessageFromNative(messageJSON);
              
              }
              
              var WebViewJavascriptBridge = window.WebViewJavascriptBridge = {
              init: init,
              send: send,
              registerHandler: registerHandler,
              callHandler: callHandler,
              _fetchQueue: _fetchQueue,
              _fetchQueueIOS: _fetchQueueIOS,
              _handleMessageFromNative: _handleMessageFromNative
              };
              
              var doc = document;
              _createQueueReadyIframe(doc);
              _createQueueReadyIframe4biz(doc);
              var readyEvent = doc.createEvent('Events');
              readyEvent.initEvent('WebViewJavascriptBridgeReady');
              readyEvent.bridge = WebViewJavascriptBridge;
              doc.dispatchEvent(readyEvent);
              })();
        </script>
    </head>
    
    <body>
        <div class="top_navigation" >
            <div id=imgbox>
                <img id="img_close" src="return_back.png" width="22" height="22" />
            </div>
        </div>
        
        
        <div id="div_reload" class="main-center-m1">
            <img src="no_internet.png" width="165" height="111" />
            <div id="txt_reload" >网络错误，请重试</div>
        </div>

    </body>
    <script>
      
       // 这段代码是固定的，必须要放到js中
       function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                return callback(WebViewJavascriptBridge);
            }
            if (window.WVJBCallbacks) {
                return window.WVJBCallbacks.push(callback);
            }
            window.WVJBCallbacks = [callback];
            // -- 这段代码用于 iOS 自动注入脚本 --
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'yy://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            // -- end --
            document.addEventListener(
                                      'WebViewJavascriptBridgeReady'
                                      , function() {
                                      callback(WebViewJavascriptBridge)
                                      },
                                      false
                                      );
            
        }
    
        // 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用
       connectWebViewJavascriptBridge(function(bridge) {
                                      bridge.init(function(message, responseCallback) {
                                                  console.log('JS got a message', message);
                                                  var data = {
                                                  'Javascript Responds': '测试中文!'
                                                  };
                                                  
                                                  if (responseCallback) {
                                                  console.log('JS responding with', data);
                                                  responseCallback(data);
                                                  }
                                                  });

           /* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */

           // 获取用户信息
           bridge.registerHandler('native_UpdataUserCurLoc', (data, responseCallback)=> {
                                  
                                  responseCallback('收到。。。');
           });

         /* OC给JS提供公开的API, 在JS中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */
                                
                                      
           document.getElementById('div_reload').onclick = function () {
                bridge.callHandler('native_reloadWebview', '', function responseCallback(responseData) {
                  });
           };
                                      
           document.getElementById('img_close').onclick = function () {
                bridge.callHandler('native_closeCurPage', '', function responseCallback(responseData) {
                    });
         };
       })

    </script>
</html>
